<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               :title="titFormat"
               :modal="false"
               class="user-dialog add-or-updata"
               width="70%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <search @sumbit='sumbit'>
        <!--  搜索项 -->
        <template slot='form'>
          <el-form :inline='true'
                   @submit.native.prevent
                   :model='dataForm'
                   ref='dataForm'>
            <el-row :gutter="10">
              <el-col :span="8">
                <el-form-item prop="deviceSubsystem">
                  <el-select v-model="dataForm.deviceSubsystem"
                             clearable
                             placeholder="所属系统">
                    <el-option v-for="item in currentAppMenu"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item prop="value1">
                  <el-date-picker style="width: 80%"
                                  v-model="value1"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始时间"
                                  end-placeholder="结束时间"
                                  @change="onChange"
                                  clearable
                                  value-format="yyyy-MM-dd"
                                  placeholder="选择时间范围">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </template>
      </search>
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :index='true'
                      :dataList='dataList'>
      </table-template>
      <el-pagination :current-page='page'
                     :page-sizes='[10,20,50,100]'
                     :total='total'
                     layout='total, sizes, prev, pager, next'
                     @size-change='pageSizeChangeHandle'
                     @current-change='pageCurrentChangeHandle'>
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '',
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '', // 添加或修改接口，API地址
        updateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      visible: false,
      dataForm: {
        deviceSubsystem: '',
        startDate: '',
        endDate: ''
      },
      value1: [],
      currentAppMenu: [{ id: 4, name: '会务管理系统' },
        { id: 1, name: '宿舍管理系统' },
        { id: 7, name: '访客管理系统' },
        { id: 2, name: '智慧路灯系统' },
        { id: 3, name: '多媒体管理系统' },
        { id: 5, name: '餐饮管理系统' },
        { id: 6, name: '能耗管理系统' },
        { id: 0, name: '集成管理系统' },
        { id: 8, name: '视频监控系统' },
        { id: 9, name: '健身房管理系统' },
        { id: 10, name: '门禁管理系统' }],
      titFormat: ''
    }
  },
  components: { tableTemplate, Search },
  computed: {
    tableData () {
      return [
        { label: '设备读数', width: '130', prop: 'readingValue' },
        { label: '所属子系统', width: '120', prop: 'deviceSubsystemName' },
        { label: '所在位置', width: '80', prop: 'areaAllName' },
        { label: '采集时间', width: '150', prop: 'createDate' }
      ]
    }
  },
  methods: {
    sumbit () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getData()
        }
      })
    },
    onChange (val) {
      if (val) {
        this.dataForm.startDate = val[0]
        if (val[1].slice(-8) === '00:00:00') {
          this.dataForm.endDate = val[1].slice(0, -8) + '23:59:59'
          this.value1[1] = this.value1[1].slice(0, -8) + '23:59:59'
        } else {
          this.dataForm.endDate = val[1]
        }
      } else {
        this.dataForm.startDate = ''
        this.dataForm.endDate = ''
      }
    },
    init (data) {
      if (data) {
        this.dataForm = data
      }
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.titFormat = `设备ID:${this.dataForm.deviceId} 设备类型:${this.$store.state.EquTypeList.find(item => item.id === this.dataForm.deviceType).name}`
          this.getData()
        }
      })
      this.visible = true
    },
    getData () {
      let arr = {}
      arr.deviceId = this.dataForm.id
      arr.deviceSubsystem = this.dataForm.deviceSubsystem
      arr.startDate = this.dataForm.startDate
      arr.endDate = this.dataForm.endDate
      arr.page = this.page
      arr.pageSize = this.pageSize
      this.getDataList({ url: 'tb/device/getDeviceDataListPage', paramData: arr }).then(res => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.page = res.data.page
        this.total = res.data.total
        this.dataList = res.data.data
      })
    },
    closeDialog () {
      this.page = 1
      this.pageSize = 10
      this.dataForm.id = ''
      this.dataForm.deviceSubsystem = ''
      this.dataForm.startDate = ''
      this.dataForm.endDate = ''
      this.value1 = []
      this.$emit('callBack')
      this.visible = false
    },
    pageSizeChangeHandle (val, fn) {
      this.pageSize = val
      if (fn) {
        fn()
      } else {
        this.getData()
      }
      return Promise.resolve()
    },
    pageCurrentChangeHandle (val, fn) {
      this.page = val
      if (fn) {
        fn()
      } else {
        this.getData()
      }
      return Promise.resolve()
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            const url = this.hasID === true
              ? this.mixinViewModuleOptions.updateURL
              : this.mixinViewModuleOptions.addURL
            if (this.hasID === false) {
              this.dataForm.iot = 1
              this.$http.post(url, this.dataForm).then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                }
                this.$message.success('新增成功')
                this.$emit('callBack')
                this.closeDialog()
              })
            } else {
              this.$http.put(url, this.dataForm).then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                }
                this.$message.success('保存成功')
                this.$emit('callBack')
                this.closeDialog()
              })
            }
          }
        })
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>

<style lang="scss" scoped>
</style>
